<template>
	<view class="online-user-inner">
		<u-icon class="close" name="close" @click="hide"></u-icon>
		<view class="title u-flex u-row-center">
			<u-tabs :list="[{name:'在线用户'}]" active-color="#5CB61A" :is-scroll="false"></u-tabs>
		</view>
		<scroll-view class="user-list" scroll-y="true" @scrolltolower="loadData">
			<view v-for="item in onlineUser" :key="item.id" class="user-item u-col-center" bindtap="showUser(item.userID)">
				<image class="avatar" :src="item.headimgurl ? baseUrl + item.headimgurl : defaultAvatar" />
				<view class="nick">{{ item.nick_name || '无名氏' }}</view>
				<u-tag class="u-m-l-20" :text="item.role.role_name" size="mini" mode="plain" color="#F06C50" border-color="#F06C50"></u-tag>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>

	export default {
		props: {
			onlineUser: {},
			loadingType: {
				type:String,
				default:'more'
			}
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				defaultAvatar: '/static/public/images/headimgurl.jpg'
			}
		},
		methods: {
			hide() {
				this.$emit('hide-online-user')
			},
			loadData(e) {
				this.$emit('getOnlineUser')
			}
		},
		computed: {},
	}
</script>

<style lang="scss">
	.online-user-inner {
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: white;
		border-radius: 40rpx 40rpx 0px 0px;

		.title {
			height: 82rpx;
			line-height: 80rpx;
			padding: 0 24rpx;
			display: block;
			border-bottom: 2rpx solid #DBDBDB;
		}

		.close {
			height: 64rpx;
			width: 64rpx;
			position: absolute;
			right: 2rpx;
			top: 2rpx;
			z-index: 1;
		}
	}

	.user-list {
		padding: 23rpx;
		box-sizing: border-box;
		height: calc(100% - 80rpx);

		.user-item {
			display: flex;
			width: 100%;
			padding: 20rpx;
		}

		.avatar {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			background-color: #888
		}

		.nick {
			color: #343434;
			margin-left: 20rpx;
		}

		.desc {
			color: #151515;
			margin-left: 14rpx;
		}

		.gift {
			width: 27rpx;
			height: 49rpx;
			margin-left: 14rpx;
		}
	}
</style>
